<!doctype html>
<html lang="en" class="no-js">

	<head>
		<meta charset="utf-8">
		<title>前端工程师 - 许家志 个人简历</title>
		<meta name="description" content="许家志，目标为全栈工程师，现在主要在学习前端内容">
		<meta name="keywords" content="许家志,全栈工程师,全栈工程师,HTML5">
		<meta name="author" content="Harry">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
		<link rel="shortcut icon" href="http://o9bnpyjqi.bkt.clouddn.com/resume/img/favicon.ico">
		<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,700" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="http://o9bnpyjqi.bkt.clouddn.com/resume/css/plugins.css" media="screen">
		<link rel="stylesheet" type="text/css" href="http://o9bnpyjqi.bkt.clouddn.com/resume/css/style.css" media="screen">
		<link rel="stylesheet" type="text/css" href="http://o9bnpyjqi.bkt.clouddn.com/resume/css/green.css" media="screen">
		<script type="text/javascript" src="http://o9bnpyjqi.bkt.clouddn.com/resume/js/modernizr.js"></script>
	</head>

	<body data-spy="scroll" data-offset="120">
		<div class="animationload">
			<div class="loader">加载中...</div>
		</div>
		<div id="container" class="container">
			<div id="sidebar" class="fl_menu">
				<header class="sidebar-section">
					<div class="header-logo">
						<a class="logo" href="#"><span>许<br>家志</span></a>
					</div>
					<a class="elemadded responsive-link" href="#">Menu</a>
					<div class="navbar-vertical">
						<ul class="main-menu nav">
							<li class="active">
								<a href="#about"><i class="pe-7s-id"></i>个人简介</a>
							</li>
							<li>
								<a href="#skills"><i class="pe-7s-science"></i>所学技能</a>
							</li>
							<li>
								<a href="#experience"><i class="pe-7s-paper-plane"></i>工作经历</a>
							</li>
							<li>
								<a href="#education"><i class="pe-7s-study"></i>教育背景</a>
							</li>
							<li>
								<a href="#portfolio"><i class="pe-7s-portfolio"></i>作品案例</a>
							</li>
						</ul>
					</div>
				</header>
			</div>
			<div id="content">
				<section class="home wow fadeInLeft animated" id="home">
					<div class="content text-center">
						<h1>Hello ! I am <span>许家志</span></h1>
						<div class="tlt">
							<ul class="texts">
								<li>Creative Designer</li>
								<li>Talented Illustrator</li>
								<li>Web Designer</li>
							</ul>
						</div>
					</div>
					<div class="clear"></div>
				</section>
				<section class="about section section-t wow fadeInRight animated" id="about">
					<p class="sub-title">我是谁?</p>
					<h3 class="title">个人简介</h3>
					<hr>
					<p>您好，我是全栈程序员许家志。从上学期间开始，开始学习XHTML + CSS + JS +ASP 。并且开始承接 校内外网站建设。之后又学习了 C#.net PHP 等 开始了全栈程序员之路。毕业以后，进入新浪山东开始了第一份工作，在那里主要负责产品技术部。开发一些为客户专门定制的专题，包含 PC产品以及 H5互动产品。工作三年之余，便进入了 齐鲁晚报，在那里主要负责前端页面的编写，另外和一些后台管理程序的页面编写。</p>
					<ul class="list-inline">
						<li><span>姓名:</span> 许家志</li>
						<li><span>电子邮箱:</span>
							<a href="mailto:598940445@qq.com">598940445@qq.com</a>
						</li>
						<li><span>手机:</span> 15165811518</li>
						<li><span>出生日期:</span> 1990 - 01 - 04</li>
						<li><span>居住地点:</span> 山东省济南市高新区林家庄</li>
						<li><span>政治面貌:</span> 中共党员</li>
					</ul>
					<div class="clear"></div>
				</section>
				<section class="skills section section-t wow fadeInLeft animated" id="skills">
					<p class="sub-title">我会什么?</p>
					<h3 class="title">所学技能</h3>
					<hr>
					<div class="row">
						<div class="col-md-6">
							<div class="fixed">
								<div class="progress-bar-description">xHtml + CSS + JS 前端基本技能 <span style="left:86%">86%</span></div>
								<div class="progress custom-progress">
									<div class="progress-bar custom-progress-bar progress-custom-color" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100" style="width: 86%"></div>
								</div>
							</div>
							<div class="fixed">
								<div class="progress-bar-description">PHP <span style="left:73%">73%</span></div>
								<div class="progress custom-progress">
									<div class="progress-bar custom-progress-bar progress-custom-color" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 73%"></div>
								</div>
							</div>
							<div class="fixed">
								<div class="progress-bar-description">Linux操作 <span style="left:79%">79%</span></div>
								<div class="progress custom-progress">
									<div class="progress-bar custom-progress-bar progress-custom-color" role="progressbar" aria-valuenow="79" aria-valuemin="0" aria-valuemax="100" style="width: 79%"></div>
								</div>
							</div>
							<div class="fixed">
								<div class="progress-bar-description">Mysql <span style="left:57%">57%</span></div>
								<div class="progress custom-progress">
									<div class="progress-bar custom-progress-bar progress-custom-color" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="width: 57%"></div>
								</div>
							</div>
							<div class="fixed">
								<div class="progress-bar-description">PhotoShop <span style="left:33%">33%</span></div>
								<div class="progress custom-progress">
									<div class="progress-bar custom-progress-bar progress-custom-color" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%"></div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<ul class="check">
								<li>页面切图 &amp; 页面编码</li>
								<li>HTML5 响应式页面编写</li>
								<li>整站开发</li>
								<li>数据库分析建模/设计</li>
								<li>AmazeUI/Bootstrap等框架使用</li>
								<li>Gulp 自动化应用</li>
								<li>GIT 版本控制</li>
								<li>微信公众号开发</li>
								<li>Linxu服务器管理</li>
							</ul>
						</div>
					</div>
				</section>
				<section class="experience section section-t wow fadeInRight animated" id="experience">
					<p class="sub-title">我做过什么?</p>
					<h3 class="title">工作经历</h3>
					<hr>
					<div class="row">
						<div class="col-md-3 col-sm-4">
							<div class="cv-section-title">
								<h3><span>2013<small>4月</small></span> - <span>2015<small>10月</small></span></h3>
								<h4>新浪山东</h4></div>
						</div>
						<div class="col-md-9 col-sm-8">
							<div class="cv-item">
								<h4>产品技术部 负责人</h4>
								<p>在此期间主要负责新浪山东技术方面的一些问题，主要包括，产品开发（含前后端 开发 以及 服务器部署），另外负责美工 技术等工作分配及调度。除日常工作外，部门还帮助 同事维护计算机以及 公司网络等。</p>
							</div>
						</div>
					</div>
					<div class="row margin-t-40">
						<div class="col-md-3 col-sm-4">
							<div class="cv-section-title">
								<h3><span>2015<small>11月</small></span> - <span>2016<small>8月</small></span></h3>
								<h4>齐鲁晚报</h4></div>
						</div>
						<div class="col-md-9 col-sm-8">
							<div class="cv-item">
								<h4>前端开发</h4>
								<p>去的时候被分配到了Java活动开发组里面了，主要负责页面切图，页面开发。含PC端管理后台编写 以及HTML5页面的编写。</p>
							</div>
						</div>
					</div>
				</section>
				<section class="experience education section section-t wow fadeInLeft animated" id="education">
					<p class="sub-title">我的学校!</p>
					<h3 class="title">教育背景</h3>
					<hr>
					<div class="row">
						<div class="col-md-3 col-sm-4">
							<div class="cv-section-title">
								<h3><span>2008<small>9月</small></span> - <span>2012<small>7月</small></span></h3>
								<h4>聊城大学</h4></div>
						</div>
						<div class="col-md-9 col-sm-8">
							<div class="cv-item">
								<h4>电子商务系</h4>
								<p>在校期间，在聊城大学计算机学院学习电子商务专业。该专业主要学习经济、管理、计算机三方面内容，而我因为对计算机的喜好，所以，偏向于计算机方向。在校期间，一直在学生组织里保持活跃状态，在格创计算机协会里任职第三届主席，在学校普及计算机应用知识，并组织计算机爱好者一起学习网站开发。和同学组织团队，承接校内外网站建设项目.</p>
							</div>
						</div>
					</div>
					<div class="row margin-t-40">
						<div class="col-md-3 col-sm-4">
							<div class="cv-section-title">
								<h3><span>2002<small>9月</small></span> - <span>2005<small>7月</small></span></h3>
								<h4>莒县一中</h4></div>
						</div>
						<div class="col-md-9 col-sm-8">
							<div class="cv-item">
								<h4>编程之路开始</h4>
								<p>在校期间，学习Pascal 和C语言，连续两届参加青少年组 奥林匹克信息技术比赛，进入决赛，获得三等奖。</p>
							</div>
						</div>
					</div>
				</section>
				<section class="section section-t" id="portfolio">
					<p class="sub-title">做的东西</p>
					<h3 class="title">作品案例</h3>
					<hr>
					<div class="row margin-t-20">
						<div class="col-md-12">
							<ul class="portfolio-filters">
								<li class="filter active" data-filter="all">All</li>
								<li class="filter" data-filter="design">Personal Computer</li>
								<li class="filter" data-filter="photography">H5 Mobile</li>
							</ul>
							<div id="grid" class="portfolio-items">
								<div class="row">
									<div class="col-sm-4 mix margin-t-20 design effects overlay-effect clearfix">
										<div class="img"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_1_2.jpg" alt="Portfolio Item">
											<div class="overlay"><button class="md-trigger expand" data-modal="modal-1"><i class="fa fa-search"></i><br>view More</button></div>
										</div>
									</div>
									<div class="md-modal md-effect" id="modal-1">
										<div class="md-content">
											<div class="folio">
												<div class="port-img margin-t-40"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_1.jpg" alt="Portfolio-image" class="img-responsive"></div>
												<div class="sp-name"><strong>新浪山东微博粉丝节案例</strong><br><span>PC端作品</span></div>
												<div class="sp-dsc">该项目为新浪山东期间开发的微博粉丝节作品，图设计为一专业美工，我负责技术开发。主要功能点为老虎机的实现以及，测试问卷的功能实现。 另外实现数据与逻辑的分离，便于未来的更新维护。</div><button class="md-close"><i class="fa fa-times"></i></button></div>
										</div>
									</div>
									<div class="md-overlay"></div>
									<div class="col-sm-4 mix margin-t-20 photography effects overlay-effect clearfix">
										<div class="img"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_5_2.jpg" alt="Portfolio Item">
											<div class="overlay"><button class="md-trigger expand" data-modal="modal-2"><i class="fa fa-search"></i><br>view More</button></div>
										</div>
									</div>
									<div class="md-modal md-effect" id="modal-2">
										<div class="md-content">
											<div class="folio">
												<div class="port-img margin-t-40"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_5.jpg" alt="Portfolio-image" class="img-responsive"></div>
												<div class="sp-name"><strong>《神仙道》手游推广案例</strong><br><span>H5移动端</span></div>
												<div class="sp-dsc">该案例为移动端案例，总共分为三期，主要实现了照片的上传以及展示。该案例中，我主要负责了前端页面的编写。</div><button class="md-close"><i class="fa fa-times"></i></button></div>
										</div>
									</div>
									<div class="md-overlay"></div>
									<div class="col-sm-4 mix margin-t-20 design photography effects overlay-effect clearfix">
										<div class="img"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_3_t.jpg" alt="Portfolio Item">
											<div class="overlay"><button class="md-trigger expand" data-modal="modal-3"><i class="fa fa-search"></i><br>view More</button></div>
										</div>
									</div>
									<div class="md-modal md-effect" id="modal-3">
										<div class="md-content">
											<div class="folio">
												<div class="port-img margin-t-40"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_3.jpg" alt="Portfolio-image" class="img-responsive"></div>
												<div class="sp-name"><strong>日新传媒官方网站</strong><br><span>响应式案例</span></div>
												<div class="sp-dsc">该案例为在齐鲁壹点期间做编写的，美工设计为一美工。使用了Bootstrap作为UI框架，另外，直接采用了该框架的响应式布局，直接实现了该页面的手机端自适应。</div><button class="md-close"><i class="fa fa-times"></i></button></div>
										</div>
									</div>
									<div class="md-overlay"></div>
									<div class="col-sm-4 mix margin-t-20 photography effects overlay-effect clearfix">
										<div class="img"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_4_2.jpg" alt="Portfolio Item">
											<div class="overlay"><button class="md-trigger expand" data-modal="modal-4"><i class="fa fa-search"></i><br>view More</button></div>
										</div>
									</div>
									<div class="md-modal md-effect" id="modal-4">
										<div class="md-content">
											<div class="folio">
												<div class="port-img margin-t-40"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_4.jpg" alt="Portfolio-image" class="img-responsive"></div>
												<div class="sp-name"><strong>“山东工匠·鲁酒大师”鲁酒大师评选案例</strong><br><span>手机端+PC 端案例</span></div>
												<div class="sp-dsc">该案例分别开发了手机端+ PC端案例。是在齐鲁晚报期间做的作品，主要是一个小型案例站点，通用的首页、列表页、详情页、投票页面等都在该案例中实现。</div><button class="md-close"><i class="fa fa-times"></i></button></div>
										</div>
									</div>
									<div class="md-overlay"></div>
									<div class="col-sm-4 mix margin-t-20 design effects overlay-effect clearfix">
										<div class="img"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_2_2.jpg" alt="Portfolio Item">
											<div class="overlay"><button class="md-trigger expand" data-modal="modal-5"><i class="fa fa-search"></i><br>view More</button></div>
										</div>
									</div>
									<div class="md-modal md-effect" id="modal-5">
										<div class="md-content">
											<div class="folio">
												<div class="port-img margin-t-40"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_2.jpg" alt="Portfolio-image" class="img-responsive"></div>
												<div class="sp-name"><strong>富路电动车官方网站</strong><br><span>手机端+PC 端案例</span></div>
												<div class="sp-dsc">该网站案例是在齐鲁晚报期间开发的。案例主要使用了Bootstrap以及AmazeUI框架的使用，前台使用了BS框架，后台管理使用了AM框架。 前端页面为美工设计，前端静态页面由我设计。后台界面有我根据框架内容进行设计以及编写。</div><button class="md-close"><i class="fa fa-times"></i></button></div>
										</div>
									</div>
									<div class="md-overlay"></div>
									<div class="col-sm-4 mix margin-t-20 photography effects overlay-effect clearfix">
										<div class="img"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_6_2.jpg" alt="Portfolio Item">
											<div class="overlay"><button class="md-trigger expand" data-modal="modal-6"><i class="fa fa-search"></i><br>view More</button></div>
										</div>
									</div>
									<div class="md-modal md-effect" id="modal-6">
										<div class="md-content">
											<div class="folio">
												<div class="port-img margin-t-40"><img src="http://o9bnpyjqi.bkt.clouddn.com/resume/img/portfolio/pro_6.jpg" alt="Portfolio-image" class="img-responsive"></div>
												<div class="sp-name"><strong>良记XIA范儿轰趴盛典</strong><br><span>H5移动端案例</span></div>
												<div class="sp-dsc">该案例为一商业线下活动所做的线上互动案例。画面设计为他人设计，功能实现为我开发，主要实现了图像文字的合成，以及七牛云存储的存储开发。</div><button class="md-close"><i class="fa fa-times"></i></button></div>
										</div>
									</div>
									<div class="md-overlay"></div>
								</div>
							</div>
						</div>
					</div>
				</section>
				<footer class="footer">
					<p class="copyright">© 2016 ITknight. All rights Reserved.</p>
				</footer>
			</div>
		</div>
		<a href="#" class="back-to-top"><i class="pe-7s-angle-up"></i></a>
		<script src="http://o9bnpyjqi.bkt.clouddn.com/resume/js/jquery.min.js"></script>
		<script type="text/javascript" src="http://o9bnpyjqi.bkt.clouddn.com/resume/js/plugins.js"></script>
		<script type="text/javascript" src="http://o9bnpyjqi.bkt.clouddn.com/resume/js/jquery.app.js"></script>
	</body>

</html>